<%--
  Created by IntelliJ IDEA.
  User: 徐洲
  Date: 2023/12/12
  Time: 15:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
  request.setCharacterEncoding("UTF-8");
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<%--个人信息页--%>

<!DOCTYPE html>
<%@page import="com.bean.User"%>
<jsp:useBean id="userDao" class="com.daoImpl.UserDAOImpl"></jsp:useBean>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>摆烂俱乐部</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="robots" content="all,follow">
  <!-- Bootstrap CSS-->
  <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
  <!-- Font Awesome CSS-->
  <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
  <!-- Google fonts - Roboto -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,700">
  <!-- owl carousel-->
  <link rel="stylesheet" href="vendor/owl.carousel/assets/owl.carousel.css">
  <link rel="stylesheet" href="vendor/owl.carousel/assets/owl.theme.default.css">
  <!-- theme stylesheet-->
  <link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet">
  <!-- Custom stylesheet - for your changes-->
  <link rel="stylesheet" href="css/custom.css">
  <!-- Favicon-->
  <link rel="shortcut icon" href="favicon.png">


  <!-- Tweaks for older IEs--><!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
</head>
<body>

<%String username = (String) session.getAttribute("username");%>
<!-- navbar-->
<header class="header mb-5">
  <!--
  *** TOPBAR ***
  _________________________________________________________
  -->
  <jsp:include page="common/login.jsp"></jsp:include>
  <jsp:include page="common/top1.jsp"></jsp:include>
  <!-- Sraech -->
  <jsp:include page="common/search.jsp"></jsp:include>
</header>
<!-- *** TOP BAR END ***-->

<div id="all">
  <div id="content">
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <!-- breadcrumb-->
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item"><a href="index.jsp">家</a></li>
              <li aria-current="page" class="breadcrumb-item active">个人账号</li>
            </ol>
          </nav>
        </div>
        <div class="col-lg-3">
          <!--
          *** CUSTOMER MENU ***
          _________________________________________________________
          -->
          <div class="card sidebar-menu">
            <div class="card-header">
              <h3 class="h4 card-title">个人</h3>
            </div>
            <div class="card-body">
              <ul class="nav nav-pills flex-column">
                <a href="user-account.jsp" class="nav-link"><i class="fa fa-user"></i> 个人信息</a>
                <a href="article_collect.jsp" class="nav-link"><i class="fa fa-list"></i> 我的收藏</a>
                <a href="user_pwd.jsp" class="nav-link"><i class="fa fa-list"></i> 重置密码</a>
                <a href="user_avatar.jsp" class="nav-link active"><i class="fa fa-list"></i> 修改头像</a>
                <a href="logout.jsp" class="nav-link"><i class="fa fa-sign-out"></i> 退出登录</a>
              </ul>
            </div>
          </div>
          <!-- /.col-lg-3-->
          <!-- *** CUSTOMER MENU END ***-->
        </div>
        <div class="col-lg-9">
          <div class="box">
            <h1>修改头像</h1>
            <p class="lead">修改头像在这儿.</p>
            <!-- Change personal details -->
            <%--                  enctype="multipart/form-data"--%>
            <form method = "post" action = "./changeAvatar" enctype="multipart/form-data">
              <%
                User nowUser = userDao.getUserInfo(username);
                request.setAttribute("nowUser",nowUser);
              %>
              <input name="username" type="hidden" value="${nowUser.username}">

              <div style="height: 220px;
  width: 250px;
  border: 1px solid #eee;
  border-radius: 50%;
  padding: 10px;
  box-shadow: 0 0 10px #ddd;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  margin-bottom: 150px">
                <img style="  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #eee;" src="upload/img/${nowUser.avatar}" alt="头像"/>
              </div>

              <div style="height: 180px"></div>
              <div class="col-md-12 text-center">
                <!-- 通过 accept 属性，可以指定，允许用户选择什么类型的文件 -->
<%--                <input type="file" name="file" id="file" accept="image/png,image/jpeg" style="display: none;">--%>
<%--                <button type="button" class="btn btn-primary" onclick="document.getElementById('file').click()"> 上传图片</button>--%>
                <input type="file" name="file" id="file" accept="image/png,image/jpeg" style="display:none;">
                <button type="button" class="btn btn-primary" onclick="document.getElementById('file').click()"> 上传图片</button>
                <span id="filename"></span>
                <button type="submit" name="submit" class="btn btn-primary"><i class="fa fa-save"></i> 保存修改</button>
              </div>
            </form>

          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!--
    *** 版权 ***
    _________________________________________________________
    -->
<jsp:include page="common/copyright.jsp"></jsp:include>
<!-- *** COPYRIGHT END ***-->
<!-- JavaScript files-->
<script>
  document.getElementById('file').addEventListener('change', function() {
    const filename = this.value.split('\\').pop();
    document.getElementById('filename').textContent = filename;
  });
</script>
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="vendor/jquery.cookie/jquery.cookie.js"> </script>
<script src="vendor/owl.carousel/owl.carousel.min.js"></script>
<script src="vendor/owl.carousel2.thumbs/owl.carousel2.thumbs.js"></script>
<script src="js/front.js"></script>
</body>
</html>
